<template>
    <div>
        <el-table :data='specslist' border style="width: 100% ;" class="table">
            <el-table-column prop="id" label="规格编号" width="100">
            </el-table-column>

            <el-table-column prop="specsname" label="规格名称" width="160">
            </el-table-column>

            <el-table-column label="商品规格" >
                <template slot-scope="item">
                    <div>
                        <el-tag type="info" plain v-for="attr in item.row.attrs" :key="attr"
                            size="medium" class="tag">{{ attr }}</el-tag>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="状态" width="100">
                <template slot-scope="item">
                    <div>
                        <el-tag type="success" plain size="medium" v-if="item.row.status == 1">启用</el-tag>
                        <el-tag type="danger" plain size="medium" v-else>禁用</el-tag>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="200">
                <template slot-scope="item">
                    <div>
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(item.row.id)">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(item.row.id)">删除</el-button>
                    </div>
                </template>
            </el-table-column>

        </el-table>

        <el-pagination background layout="prev, pager, next" class="fen" :page-size="getSize" :total="count"
            @current-change="change">
        </el-pagination>

    </div>
</template>
<script>
import { specsdelete } from "../../request/api"
import { mapGetters, mapActions } from 'vuex';
export default {
    data() {
        return {

        }
    },
    methods: {
        ...mapActions({
            getSpecs: "specs/getSpecsListAction",
            getCount: "specs/getCountAction",
            changePageInfo: "specs/changePageAction",
        }),

        del(id) {
            specsdelete({ id }).then(res => {
                // console.log(res);
                if (res.code == 200) {
                    this.$message(res.msg);
                    this.getSpecs()
                    this.getCount()
                }
            })


        },
        edit(id) {
            this.$emit("edit", id)
        },
        // 切换页面时触发
        change(e) {
            // console.log(e);
            //点击每次切换
          this.changePageInfo(e)


        }
    },
    mounted() {
        this.getSpecs()
        this.getCount()
    },
    watch: {},
    computed: {
        ...mapGetters({
            specslist: "specs/getSpecsList",
            getSize: "specs/getSize",
            count: "specs/getCount",
        }),
    },
    filters: {},
    components: {}
}
</script>
<style scoped>
.fen {
    position: absolute;
    right: 10px;
    margin-top: 10px;

}
.tag{
    margin-left: 10px;
}
</style>